<script lang="ts">

interface I_State {
    loginData: {
        uid: string;
        password: string;
    };
}
import * as api from "@/api";
import type { FormInstance, FormRules } from 'element-plus';
import { useUser, initState } from '@/store';
export default defineComponent({
    setup() {
        const router = useRouter();
        const userStore = useUser();
        onMounted(() => {
            //初始化数据
            initState();
        });
        const loginUser = async (formEl: FormInstance | undefined) => {
            if (!formEl) return;
            await formEl.validate((valid, fields) => {
                if (valid) {
                    api.user.loginUser({
                        ...state.loginData,
                    }).then((res) => {
                        userStore.user = { ...res };
                        sessionStorage.setItem("Token", res.token);
                        router.push('/main');
                    }).catch(_ => {
                        resetForm(formEl);
                        window.sessionStorage.clear();
                    });
                } else {
                    console.log('error !!');
                    resetForm(formEl);
                    return false;
                }
            });
        };
        const resetForm = (formEl: FormInstance | undefined) => {
            if (!formEl) return;
            formEl.resetFields();
        };
        const state = reactive<I_State>({
            loginData: {
                uid: "",
                password: "",
            },
        });
        const ruleFormRef = ref<FormInstance>();
        const loginRules = reactive<FormRules>({
            uid: [
                { required: true, message: "请输入用户名", trigger: "blur" },
                { min: 3, max: 12, message: "长度在 3 到 12 个字符", trigger: "blur" },
            ],
            password: [
                { required: true, message: "请输入密码", trigger: "blur" },
                { min: 3, max: 16, message: "长度在 3 到 16 个字符", trigger: "blur" },
            ],
        });
        return {
            loginUser,
            resetForm,
            ruleFormRef,
            loginRules,
            ...toRefs(state)
        };
    },
});
</script>
<template>
    <!-- 5120200001 123456 -->
    <div class="login_warpper">
        <div class="login_title">
            <h2>web成绩管理系统</h2>
        </div>
        <div class="login_head" @keyup.enter="loginUser(ruleFormRef)">
            <!-- 头像区域 -->
            <div class="login_img">
                <img src="@/assets/logo.png" alt="图片加载失败" title="logo" />
            </div>
            <!-- 登陆区域 -->
            <el-form :model="loginData" class="login_rangle" :rules="loginRules" ref="ruleFormRef">
                <el-form-item prop="uid">
                    <el-input v-model="loginData.uid" clearable placeholder="请输入用户名">
                        <template #prefix>
                            <el-icon>
                                <i-ep-avatar></i-ep-avatar>
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="loginData.password" show-password clearable placeholder="请输入密码">
                        <template #prefix>
                            <el-icon>
                                <i-ep-lock></i-ep-lock>
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item class="btn">
                    <el-button type="primary" @click="loginUser(ruleFormRef)" size="large">登录</el-button>
                    <el-button type="info" size="large" @click="resetForm(ruleFormRef)">重设</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<style lang = "less" >
.login_warpper {
    height: 100%;
    width: 100%;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    background-color: #cadade;

    .login_title {
        border-radius: 3px;
        position: absolute;
        bottom: 40px;
        font-size: 16px;
        text-align: center;
    }

    .login_head {
        width: 600px;
        height: 380px;
        background-color: rgba(202, 228, 243, 0.6);
        backdrop-filter: blur(50px);
        border-radius: 3px;
        position: relative;

        .login_img {
            border: 1px solid #eee;
            border-radius: 50%;
            background-color: #fff;
            padding: 10px;
            box-shadow: 0 0 10px #ddd;
            position: absolute;
            left: 50%;
            transform: translate(-50%, -50%);

            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background-color: #eee;
            }
        }

        .login_rangle {
            position: absolute;
            bottom: 20px;
            width: 100%;
            box-sizing: border-box;
            padding: 0 20px;

            .el-form-item {
                padding: 0px 60px;
                height: 60px;
                align-items: center;
                margin: 0px;
            }

            .btn {
                display: flex;

                .el-form-item__content {
                    justify-content: center;
                }
            }
        }
    }
}
</style>